<template>
  <view class="footprint_wrapper">
    <!--引用组件-->
    <ls-skeleton :round="true" :skeleton="skeleton" :loading="loading">
      <view>
        <view class="day_wrapper" v-for="(item, index) in list" :key="index">
          <view class="title_wrapper">{{ item.time }}</view>
          <view class="content_wrapper">
            <view
              class="item_wrapper"
              v-for="(f, i) in item.data"
              :key="i"
              @tap.stop="itemShopping(f, i)"
            >
			
              <view class="image_">
                <image mode="aspectFit" :src="httpUrlFn(f.prod?f.prod.pic:'')" />
              </view>
              <view class="text_"
                >￥<text>{{ f.prod.price }}</text></view
              >
            </view>
          </view>
        </view>
		
		<view class="none_list_wrapper" v-if="list.length === 0">
		  <view class="none_list">
		    <image src="/static/None/node_footprint.png"></image>
		    <text>暂无足迹喔~</text>
		  </view>
		</view>
		
        <u-loadmore
		 v-if="list.length !== 0"
          :status="status"
          :icon-type="iconType"
          :load-text="loadText"
          @loadmore="loadNextFn"
        />
      </view>
    </ls-skeleton>
  </view>
</template>

<script>
import { getSelFootprint } from "@/api/myFootprint";
import { BASE_URL_IMAHE } from "../../../../utils/https";
import lsSkeleton from "@/components/ls-skeleton/ls-skeleton.nvue";

export default {
  name: "index.vue",
  components: {
    lsSkeleton,
  },
  data() {
    return {
      loading: true,
      skeleton: [
        "line-sm*3",
        40,
        "card",
        "circlesm*2",
        "line",
        "card-lg",
        40,
        "news",
        "line-sm*3+square",
      ],
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
      num: 10,
      params: {
        current: 1,
        size: 10,
        userId: "",
      },
      list: [],
    };
  },
  onShow() {
    this.params.userId = uni.getStorageSync("userId") || "";
    this.getSelFootprintFn();
  },
  //下拉刷新
  onPullDownRefresh() {
    uni.showLoading({
      title: "正在刷新...",
    });
    this.params.current = 1;
    this.params.size = 10;
    this.loading = true;
    this.list = [];
    this.getSelFootprintFn();
  },
  //上拉
  onReachBottom() {
    console.log("触发上拉加载");
    this.getSelFootprintFn();
  },
  methods: {
    httpUrlFn(item) {
		console.log(item)
      return BASE_URL_IMAHE + item;
    },

    //点击组件触发上拉加载
    loadNextFn() {
      console.log("点击组件触发上拉加载2123");
      this.getSelFootprintFn();
    },

    itemShopping(f, i) {
      console.log(f, "发发发");
      const item = {
        ...f,
        ...f.prod,
      };
      console.log(item, "data");
      uni.navigateTo({
        url: `/pages/subpackage/goods/detail?prodId=${item.prodId}&pic=${
          item.pic
        }&prodName=${item.prodName}&price=${item.price}&oriPrice=${
          item.oriPrice
        }&vrPayUsers=${item.vrPayUsers}&commission=${
          item.commission
        }&properties=${item.properties}&content=${encodeURIComponent(
          JSON.stringify(item.content)
        )}&channelId=${item.channelId}&itemType=${item.channelId}`,
      });
    },

    isToday(someDate) {
      const today = new Date();
      return (
        someDate.getDate() == today.getDate() &&
        someDate.getMonth() == today.getMonth() &&
        someDate.getFullYear() == today.getFullYear()
      );
    },

    async getSelFootprintFn() {
      this.status = "loading";
      const res = await getSelFootprint(this.params);
      console.log(res, "查询足迹");
      const data = JSON.parse(JSON.stringify(res.data));
      if (res.code === 0) {
        //关闭加载动画
        uni.stopPullDownRefresh();
        uni.hideLoading();
        data.forEach((item, index) => {
          console.log(index);
          console.log(item.lastModifiedTime, "item.putawayTime");
          // let time = Date.parse(new Date(item.putawayTime)); //方法一
          // console.log(time, "time");
          //方法一：可能不兼容ios

          let time = new Date(
            item.lastModifiedTime.replace(/-/g, "/")
          ).getTime(); //方法二
          console.log(time, "time");
          //方法二: 兼容Android和ios都能快速解决

          let data = new Date(time);
          let year = data.getFullYear();
          let month = data.getMonth() + 1;
          let day = data.getDate();

          //获取本年开始的时间
          let yearDate = new Date();
          yearDate.setMonth(0);
          yearDate.setDate(1); //set设置时间
          yearDate.setHours(0);
          yearDate.setSeconds(0);
          yearDate.setMinutes(0);
          let thisYear = new Date(yearDate);
          console.log(thisYear, "获取本年开始的时间");
          const StartingThisYear = thisYear.getTime();
          console.log(StartingThisYear, "获取本年开始的时间的时间戳");
          //判断获取到的时间是否小于今年开始的时间,小于则是去年获取以上，就显示年，否则只显示月份日期
          if (time < StartingThisYear) {
            item.newTime = year + "年" + month + "月" + day + "日";
            console.log(item.newTime, "item.newTime");
          } else {
            if (
              new Date(Number(time)).toDateString() ===
              new Date().toDateString()
            ) {
              console.log("当天的时间");
              item.newTime = "今天";
            } else if (new Date(Number(time)) < new Date()) {
              console.log("之前的时间");
              item.newTime = month + "月" + day + "日";
            }
            console.log(item.newTime, "item.newTime");
          }
        });
        console.log(data, "data");

        const lastList = Object.values(
          data.reduce((res, item) => {
            console.log(res, "res");
            console.log(item, "item");
            // item.baseDate = item.payDate.slice(0, 7);
            const obj = {
              time: item.newTime,
              timeData: item.lastModifiedTime,
              data: [item],
            };
            res[item.newTime]
              ? res[item.newTime].data.push(item)
              : (res[item.newTime] = obj);
            return res;
          }, {})
        );

        this.list.push(...lastList);

        console.log(this.list, "list");

        this.list.sort(function (a, b) {
          return new Date(b.timeData) - new Date(a.timeData);
        });
        setTimeout(() => {
          this.loading = false;
        }, 500);
        console.log(this.list, "list22");

        if (res.data.length === 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }

        if (res.data.length >= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }

        if (this.list.length <= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
          res.data.length !== 0 &&
          res.data.length <= this.params.size
        ) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.footprint_wrapper {
  background: #f5f5f5;
  min-height: 100vh;
  .day_wrapper {
    padding: rpx(12) rpx(12) rpx(0);
    background: #ffffff;
    margin-bottom: rpx(8);
    > .title_wrapper {
      font-size: rpx(15);
      font-weight: bold;
      color: #353535;
      margin-bottom: rpx(12);
    }
    > .content_wrapper {
      display: flex;
      flex-wrap: wrap;
      > .item_wrapper {
        width: 33.33%;
        margin-bottom: rpx(12);
        > .image_ {
          display: flex;
          justify-content: center;
          align-items: center;
          width: rpx(112);
          height: rpx(112);
          background: #fafafa;
          border-radius: rpx(5);
          margin-bottom: rpx(4);
          > image {
            vertical-align: middle;
            height: rpx(112);
          }
        }
        > .text_ {
          font-size: rpx(10);
          font-weight: bold;
          color: #fa5151;
          > text {
            font-size: rpx(13);
          }
        }
      }
    }
  }
}
.none_list_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  	width: 100%;
  	height: 100%;
    > .none_list {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  	  margin-top: 30vh;
  	
      > image {
        width: rpx(222);
        height: rpx(158);
        vertical-align: middle;
      }
      > text {
        font-size: rpx(13);
        font-weight: 400;
        color: #b2b2b2;
      }
    }
  }
</style>
